<template>
	<view>
		<Header title="云上坚果"></Header>
		<view class="identify_warp">
			<view class="identify br">
				<view class="identify_top br">
					<!-- <view class="identify_state ">
						<view class="icon_state"></view>
						<view class="state_text">
							<text>苗木供应商认证说明</text>
						</view>
					</view> -->
					<HeadTit title="苗木供应商认证说明"></HeadTit>
					<view class="identify_content">
						<text>1.请选择以下两种方式中的一种进行认证；\n</text>
						<text>2.个人（指未取得工商营业执照的自然人）；\n</text>
						<text>3.企业/合作社/个体户（指已取得工商行政部门颁发的营业执照或已取得相关部门审批的组织机构）；\n</text>
						<text>4.两种认证方式在提交的资料上有差异，但不会影响正常使用；\n</text>
						<text>5.请您仔细认真阅读相关内容后，按提示填写；\n</text>
						<text>6.一经提交，我们将视同您认可相关服务条款，并遵守平台规则</text>
					</view>
				</view>
				<view class="identify_main_wrap br">
					<view class="identify_main">
						<view class="form_button">
							<view class="btn-l active">
								<text>个人</text>
							</view>
							<view class="btn-r ">
								<text>企业/合作社/个体户</text>
							</view>
						</view>
						<view class="form_wrap">
							<view class="form">
								<view class="form_item">
									<view class="item_top">
										<text>姓名 <text class="required">*</text></text>
									</view>
									<view class="input">
										<input type="text" placeholder="请输入姓名">
									</view>
								</view>
								
								<view class="form_item">
									<view class="item_top">
										<text>身份验证 <text class="required">*</text></text>
									</view>
									<view class="input">
										<input type="text" placeholder="请输入身份证号码">
									</view>
								</view>
								<view class="form_item">
									<view class="item_top">
										<text>上传身份证正面（不超过5M） <text class="required">*</text></text>
										<view class="upload">
											<view v-if="show">请选择文件</view>
											<van-uploader>
												<view>点击上传</view>
											</van-uploader>
										</view>
									</view>

								</view>
								<view class="form_item">
									<view class="item_top">
										<text>手机号码 <text class="required">*</text></text>
									</view>
									<view class="input">
										<input type="text" placeholder="请输入手机号码">
									</view>
								</view>

								<view class="form_address">
									<view class="address_tit">联系地址</view>
									<view class="form_item_address">
										<view class="item_top">
											<text>省市区县 <text class="required">*</text></text>
											
										</view>
										<view class="Mir">
											<!-- 省市区联动器 -->
											<van-action-sheet :show="isCityshow" @close="onClose" title="地区选择">
												<view><van-area :area-list="areaList" @confirm="onConfirm" /></view>
											</van-action-sheet>
											<view class="IsCityMsg" @click="isCityshow=true">
												<text class="gray">{{city ? city : '点击选择地区'}}</text>
											</view>
										</view>
									</view>
									<view class="form_item_address">
										<view class="item_top">
											<text>详细地址 <text class="required">*</text></text>
										</view>
										<view class="input">
											<input type="text" placeholder="xxxx">
										</view>
									</view>
									<view class="form_item_address">
										<view class="item_top">
											<text>培育教育基地规模 <text class="required">*</text></text>
										</view>
										<view class="input">
											<input type="text" placeholder="100亩(按实际填写)">
										</view>
									</view>
									
									<!-- <view class="commit_btn" >
										<van-button type="primary" size="large">提交按钮</van-button>
									</view> -->
									<CommitButton title="提交按钮"></CommitButton>
									
								</view>
							</view>

						</view>
					</view>
				</view>

			</view>

		</view>
		<Footer></Footer>
	</view>
</template>

<script>
	import Header from "../../components/header.vue"
	import HeadTit from "../../components/head_tit.vue"
	import CommitButton from "../../components/commitButton.vue"
	import Footer from "../../components/footer.vue"
	import area from "../../city.js"
	export default {
		data() {
			return {
				isCityshow:false,
				areaList:[],
				city:'',
				show:true
			};
		}, 
		onLoad() {
			this.areaList = area;
		},
		methods: {
			//关闭市区
			onClose() {
				this.isCityshow = false;
			},
			onConfirm(e) {
				const _this = this;
				this.isCityshow = false;
				this.city = e.detail.values[0].name+ '/' + e.detail.values[1].name+'/' +e.detail.values[2].name ;
				this.MerchantList = []
				this.MerchantListSon =[]
			},
		},
		components: {
			Header,
			Footer,
			HeadTit,
			CommitButton
			
		}
		
	}
</script>

<style lang="scss" scoped>
	.active {
		background-color: #029688;
		border-radius: 26rpx;
	}
	.gray{
		color: gray;
	}

	.Mir{
		line-height:50rpx;
		text-align:left;
		.IsCityMsg{
			cursor: pointer;
			padding: 20rpx 0;
		}
	}

	.upload {
		padding: 30rpx 0rpx;
		// text-align: right;
		display: flex;
		justify-content: space-between;
		color: gray
	}

	.required {
		color: red;
		margin-left: 10rpx;
	}

	.identify_warp {
		padding: 10rpx 26rpx 0;

		.identify {


			// height: 400rpx;

			.identify_top {
				// height: 400rpx;
				padding: 20rpx 34rpx 0;
				border-radius: 26rpx;
				background-color: #FFFFFF;
				border: 6rpx solid red;

				// .identify_state {
				// 	display: flex;
				// 	justify-content: flex-start;
				// 	align-items: center;
				// 	font-size: 44rpx;
				// 	font-weight: bold;
				// 	border-bottom: 6rpx solid #f8f8f8;
				// 	padding-bottom: 20rpx;

				// 	.icon_state {
				// 		width: 8rpx;
				// 		height: 20rpx;
				// 		background-color: #05a045;
				// 		margin-right: 30rpx;
				// 		padding-bottom: 20rpx;
				// 	}

				// }

				.identify_content {
					// width: 540rpx;
					// height: 540rpx;
					font-size: 30rpx;
					// line-height: 120rpx;
					line-height: 60rpx;
					color: rgb(102, 102, 102);




				}
			}

			.identify_main_wrap {
				.identify_main {
					// height: 600rpx;
					border: 1px solid red;
					margin-top: 15rpx;
					border-radius: 26rpx;

					.form_button {
						display: flex;
						align-items: center;
						height: 60rpx;

						justify-content: space-around;
						font-size: 36rpx;

						// border: 1px solid red;
						.btn-l {

							text-align: center;

							padding: 0 30rpx;

						}

						.btn-r {
							text-align: center;
							padding: 0 30rpx;
						}
					}

					.form_wrap {
						// height: 200rpx;

						.form {
							height: 100%;
							// border: 1px solid orange;
							padding-left: 30rpx;
							padding-right: 30rpx;
							padding-bottom: 30rpx;


							.form_item {
								border-bottom: 1px solid red;
								font-size: 28rpx;
								margin-bottom: 20rpx;

								.input {
									padding: 30rpx 0;
								}
							}

							.form_address {
								// height: 150rpx;
								// border: 1px solid red;
								

								.address_tit {
									font-weight: bold;
								}

								.form_item_address {
									margin-top: 20rpx;
									border-bottom: 1px solid red;
									font-size: 28rpx;
									margin-bottom: 20rpx;

									.input {
										padding: 30rpx 0;
									}
								}
								.commit_btn{
									border-radius: 6rpx;
									.van-button{
										color: #FFFFFF;
									}
								}
							}
						}
					
					}

				}
			}


		}
	}
</style>
